import React, { useState } from 'react'
import { Anchor, Col, Row } from 'antd';
import { Grid, Image } from 'react-vant';
import '../App.css'
import XiangQing from '../components/XiangQing';
import Header from '../components/Header';

export default function FenLei() {

  /* 左侧数据 */
  const typeList = [
    { id: 1, title: '车厘子' },
    { id: 2, title: '大菠萝' },
    { id: 3, title: '大草莓' },
    { id: 4, title: '大西瓜' },
    { id: 5, title: '其他水果' },
  ]

  /* 转换成锚点对应的数据 */
  let list = typeList.map(item => {
    return {
      key: `${item.id}`, href: `#${item.id}`, title: item.title
    }
  })

  //控制弹窗的显示隐藏
  const [visible, setVisible] = useState(false)
  //存储当前点击商品的完整数据
  const [itemobj, setItemobj] = useState({})

  /* 右侧数据 */
  let shoplist = [
    { id: 1, title: '国产车里子', price: '42.9', typeId: 1, checked: true, isCart: true, img: '/img/下载1.jpg', num: 1 },
    { id: 2, title: '国产车里子', price: '42.9', typeId: 1, checked: true, isCart: true, img: '/img/下载1.jpg', num: 1 },
    { id: 3, title: '国产车里子', price: '42.9', typeId: 1, checked: true, isCart: true, img: '/img/下载1.jpg', num: 1 },
    { id: 4, title: '国产车里子', price: '42.9', typeId: 1, checked: true, isCart: true, img: '/img/下载1.jpg', num: 1 },
    { id: 5, title: '国产车里子', price: '42.9', typeId: 1, checked: true, isCart: true, img: '/img/下载1.jpg', num: 1 },
    { id: 6, title: '国产大菠萝', price: '42.9', typeId: 2, checked: true, isCart: true, img: '/img/下载2.jpg', num: 1 },
    { id: 7, title: '国产大菠萝', price: '42.9', typeId: 2, checked: true, isCart: true, img: '/img/下载2.jpg', num: 1 },
    { id: 8, title: '国产大菠萝', price: '42.9', typeId: 2, checked: true, isCart: true, img: '/img/下载2.jpg', num: 1 },
    { id: 9, title: '国产大菠萝', price: '42.9', typeId: 2, checked: true, isCart: true, img: '/img/下载2.jpg', num: 1 },
    { id: 10, title: '国产大菠萝', price: '42.9', typeId: 2, checked: true, isCart: true, img: '/img/下载2.jpg', num: 1 },
    { id: 11, title: '国产大草莓', price: '42.9', typeId: 3, checked: true, isCart: true, img: '/img/下载3.jpg', num: 1 },
    { id: 12, title: '国产大草莓', price: '42.9', typeId: 3, checked: true, isCart: true, img: '/img/下载3.jpg', num: 1 },
    { id: 13, title: '国产大草莓', price: '42.9', typeId: 3, checked: true, isCart: true, img: '/img/下载3.jpg', num: 1 },
    { id: 14, title: '国产大草莓', price: '42.9', typeId: 3, checked: true, isCart: true, img: '/img/下载3.jpg', num: 1 },
    { id: 15, title: '国产大草莓', price: '42.9', typeId: 3, checked: true, isCart: true, img: '/img/下载3.jpg', num: 1 },
    { id: 16, title: '国产大西瓜', price: '42.9', typeId: 4, checked: true, isCart: true, img: '/img/下载4.jpg', num: 1 },
    { id: 17, title: '国产大西瓜', price: '42.9', typeId: 4, checked: true, isCart: true, img: '/img/下载4.jpg', num: 1 },
    { id: 18, title: '国产大西瓜', price: '42.9', typeId: 4, checked: true, isCart: true, img: '/img/下载4.jpg', num: 1 },
    { id: 19, title: '国产大西瓜', price: '42.9', typeId: 4, checked: true, isCart: true, img: '/img/下载4.jpg', num: 1 },
    { id: 20, title: '国产大西瓜', price: '42.9', typeId: 4, checked: true, isCart: true, img: '/img/下载4.jpg', num: 1 },
    { id: 21, title: '其他水果', price: '42.9', typeId: 5, checked: true, isCart: true, img: '/img/下载5.jpg', num: 1 },
    { id: 22, title: '其他水果', price: '42.9', typeId: 5, checked: true, isCart: true, img: '/img/下载5.jpg', num: 1 },
    { id: 23, title: '其他水果', price: '42.9', typeId: 5, checked: true, isCart: true, img: '/img/下载5.jpg', num: 1 },
    { id: 24, title: '其他水果', price: '42.9', typeId: 5, checked: true, isCart: true, img: '/img/下载5.jpg', num: 1 },
    { id: 25, title: '其他水果', price: '42.9', typeId: 5, checked: true, isCart: true, img: '/img/下载5.jpg', num: 1 },
  ]



  return (
    <div>
      {/* 标签栏 */}
      <div>
        <Header></Header>
      </div>
      <Row>
        <Col span={8}>
          <Anchor
            items={
              /* 左侧数据 */
              list
            }
          />
        </Col>
        <Col span={16}>
          {
            typeList.map(item => {
              return (
                <div key={item.id} id={item.id} style={{ height: '680px' }}>
                  {/* 标题 */}
                  <h2 style={{ textAlign: 'center' }}>{item.title}</h2>
                  <Grid>
                    {
                      shoplist.filter(pro => pro.typeId == item.id).map((v, index) => {
                        return (
                          <Grid.Item key={index} icon={<Image src={v.img} height={80} width={80} />}
                            onClick={() => {
                              //console.log(v);

                              setItemobj(v)
                              setVisible(true)
                            }}
                            text={item.title}></Grid.Item>
                        )
                      })
                    }
                    {/* 详情页组件 */}
                    <XiangQing visible={visible} itemobj={itemobj}></XiangQing>
                  </Grid>
                </div>
              )
            })
          }
        </Col>
      </Row>
    </div>
  )
}
